<template>
  <md-snackbar :md-position="position" :md-duration="isAutoClose ? timeOut : 0" :md-active.sync="isShow" md-persistent>
    <span>{{ msgs.info }}</span>
    <md-button class="md-primary" :to="link" v-if="link">{{link_text}}</md-button>
  </md-snackbar>
</template>

<script>
export default {
  name: 'Message',
  props: {
    // 是否显示消息框
    show: {
      type: Boolean,
      default: false
    },
    // 消息框的类型
    type: {
      type: String,
      default: 'success'
    },
    // 消息框出现的位置
    position: {
      type: String,
      default: 'left'
    },
    // 是否自动关闭
    isAutoClose: {
      type: Boolean,
      default: true
    },
    timeOut: {
      type: Number,
      default: 10000
    },
    // 消息
    msgs: {
      type: Object,
      default: {

      }
    }
  },
  data() {
    return {
      isShow: false,
      link: '1',
      link_text: '2'
    }
  },
  watch: {
    show(value) {
      this.isShow = value
    },
    msgs(value) {
      if(typeof value.info === 'object') {

      }
      if(typeof value.link === 'string') {
        this.$nextTick(() => {
          this.link = value.link
          this.link_text = value.link_text
        })
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>

</style>
